@CHARSET "UTF-8";

/* style the outer div to give it width */
#head .navigation {
	position: absolute;
	top: 5px; left: 140px;
	z-index: 3;
}

/* remove all the bullets, borders and padding from the default list styling */
#head .navigation {padding:0;margin:0;list-style-type:none; height:27px;}

/* style the sub-level lists */
#head .navigation ul {width:15em;}

/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#head .navigation li {float:left;height:23px;line-height:2em;}

/* style the sub level list items */
#head .navigation ul li {display:block;width:12em;height:auto;position:relative;line-height:1em;}

/* style the links for the top level */
#head .navigation a,
#head .navigation a:visited {
	display:block;
	float:left;
	height:100%;
	font-size:1.1em;
	text-decoration:none;
	color:#fff;
	padding:0 .5em 0 .5em;
	text-shadow: 0px 1px 0px #000;
}

/* style the sub level links */
#head .navigation ul a,
#head .navigation ul a:visited {
	display:block;
	color:#fff;
	width:12em;
	height:100%;
	line-height:1em;
	padding:0.5em .5em;
	text-shadow:none;
}

#head .navigation li:hover {position:relative;}
* html #head .navigation a:hover {
	position:relative;
	text-shadow: none;
}

/* style the third level background */
#head .navigation ul ul a, #head .navigation ul ul a:visited {}
/* style the fourth level background */
#head .navigation ul ul ul a, #head .navigation ul ul ul a:visited {}
/* style the sub level 1 background */
#head .navigation :hover a.sub1 {}
/* style the sub level 2 background */
#head .navigation ul :hover a.sub2 {}

/* style the level hovers */
/* first */
#head .navigation a:hover {background-color: #111;}
#head .navigation :hover > a {background-color: #111;}
/* second */
#head .navigation ul a:hover{background-color:#333;}
#head .navigation ul :hover > a {background-color:#333;}
/* third */
#head .navigation ul ul a:hover {background-color:#444;}
#head .navigation ul ul :hover > a {background-color:#444;}
/* fourth */
#head .navigation ul ul ul a:hover {background-color:#555;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
#head .navigation ul {visibility:hidden;position:absolute;height:0;top:23px;left:0;width:14em;}

/* position the third level flyout menu */
#head .navigation ul ul{left:14em;top:0;width:14em;}

/* position the third level flyout menu for a left flyout */
#head .navigation ul ul.left {left:-14em;}


/* make the second level visible when hover on first level list OR link */
#head .navigation li:hover ul, #head .navigation a:hover ul {visibility:visible; height:auto; padding-bottom:1em; background-color: #111;}
/* keep the third level hidden when you hover on first level list OR link */
#head .navigation :hover ul ul{visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
#head .navigation :hover ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
#head .navigation :hover ul :hover ul{visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
#head .navigation :hover ul :hover ul :hover ul {visibility:visible;}
